<template>
	<view class="root-lay">
		<view class="status_bar"></view>
		<view class="page_root">
			<view class="page_content"
				:style=" rightToolBarData.length > 0 ? 'width:calc(100vw - var(--page-right-toolbar-width))' : 'width:100vw' ">
				<slot name="pageContent"></slot>
			</view>
			
			<!-- :style="(rightToolBarData.length > 0) ? 'width:calc(100vw-56rpx)': 'width:100vw'" -->

			<view v-if="rightToolBarData.length>0" class="right_toolbar" :style="'background-color:' + (rightToolBarBgColor)">
				<view class="sub_group" v-for="(itemGroup,indexGroup) in rightToolBarData" :key="indexGroup">
					<view class="tool-item" v-for="(item,index) in itemGroup" :key="item.image"
						@click="onToolClick(item)">
						<image class="tool-img" :src="item.image"></image>
						<view v-if="item.disable" class="tool-mask">
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<slot name="popupContent"></slot>
	</view>
</template>

<script>
	export default {
		props: {
			rightToolBarData: {
				type: Array,
				default: () => {
					return [];
				}
			},

			rightToolBarBgColor: {
				type: String,
				default: '#ff66ff'
			},
		},
		
		methods:{
			onToolClick(e) {
				console.log("onToolClick")
				this.$emit("onToolItemClick" ,e.type )
			}
		}
	}
</script>

<style lang="scss">
	.root-lay {
		position: relative;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100vw;
		background-color: #0062B0;
	}

	.page_root {
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		width: 100vw;
		height: calc(100vh - var(--status-bar-height));
		// background-color: #F0AD4E;

		.page_content {
			position: relative;
			box-sizing: border-box;
			height: calc(100vh - var(--status-bar-height));
		}

		.right_toolbar {
			position: relative;
			width: var(--page-right-toolbar-width);
			height: calc(100vh - var(--status-bar-height));
			// background-color: #4CD964;
			box-sizing: border-box;
			padding: 20rpx 0;
			position: relative;
			
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			.sub_group {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				
				.tool-item {
					position: relative;
					// width: 44rpx;
					// height: 44rpx;
				}
				
				.tool-item:not(:last-child) {
					margin-bottom: 13upx;
				}

				.tool-mask {
					position: absolute;
					top: 0;
					left: 0;
					width: 44rpx;
					height: 44rpx;
					background-color: #000;
					opacity: 0.5;
					z-index: 5;
				}

				.tool-img {
					width: 36upx;
					height: 36upx;
				}
			}
		}
	}
</style>
